<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nandx</title>
    <link rel="icon" href="images/team-work.png">
    <script type="text/javascript" src="js/n.js"></script>
    <script src="js/l2dwidget.min.js"></script>
    <style>
        html {height: 100%;}
        body {
            background-color: #333;
            margin: 0px;
            max-width: 100%;
            height: 100%;
            overflow-x: hidden;
            font-family: "Microsoft Yahei Light","Microsoft Yahei",PingFangSC-Regular,Helvetica,sans-serif,"等线";
            cursor: default;
            -webkit-tap-highlight-color: transparent;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }

        #topBg {
            z-index: -1;
            position: fixed;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("images/Home_TopBg0.jpg");
            color: transparent;
            transition: opacity 1s;
            opacity: 0;
        }
        /*.navBar {*/
        /*    position: absolute;*/
        /*    top: 0px;*/
        /*    width: 100%;*/
        /*    height: 100px;*/
        /*    transition: .25s;*/
        /*}*/
        .topLogo {
            position: absolute;
            left: 0px;
            margin-left: 200px;
            top: 30px;
            width: 145px;
            height: 80px;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("images/Logo_Main_1808.png");
            transition: .25s;
        }
        .navBox {
            position: absolute;
            left: 100%;
            margin-left: -575px;
            top: 30px;
            width: 400px;
            text-align: center;
        }
        .navLink {
            position: relative;
            text-decoration: none;
            transition: .25s;
        }
        .navBar .navLink {
            color: white;
            font-size: 15px;
            margin: 30px;
        }
        .navBar .navLink:before {
            content: '';
            width: 100%;
            height: 2px;
            position: absolute;
            left: 0;
            bottom: -10px;
            background: rgba(112,192,0,1.0);
            transition: .25s;
            transform: scale(0);
        }
        .navBar .navLink:hover:before {transform: scale(1);}
        .navBar .navLink:active:before {background: rgba(112,192,0,0.6);}
        .navBar .navLink:active {color: rgba(255,255,255,0.6);}
        .menuIcon {
            position: absolute;
            top: 31.5px;
            left: 100%;
            margin-left: -50px;
            width: 25px;
            height: 2px;
            padding: 6px 0;
            border-top: 2px solid;
            border-bottom: 2px solid;
            background-clip: content-box;
            transition: .25s;
            cursor: pointer;
            display: none;
        }
        .navBar .menuIcon {
            border-color: white;
            background-color: white;
        }
        #navMenu .menuIcon {
            border-color: rgba(0,0,0,0.6);
            background-color: rgba(0,0,0,0.6);
        }
        .navBar .menuIcon:hover {
            border-color: rgba(255,255,255,0.6);
            background-color: rgba(255,255,255,0.6);
        }
        #navMenu .menuIcon:hover {
            border-color: rgb(112,192,0);
            background-color: rgb(112,192,0);
        }
        #mask {
            position: fixed;
            z-index: -99;
            width: 100%;
            height: 100%;
            background: transparent;
            transition: .25s;
        }
        #navMenu {
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 100%;
            margin-left: 30px;
            width: 260px;
            height: 100%;
            padding-top: 80px;
            background: white;
            -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 30px;
            -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 30px;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 30px;
            transition: .25s;
        }
        #navMenu .navLink {
            color: rgba(0,0,0,0.6);
            font-size: small;
            display: block;
            width: 100%;
            padding-left: 30px;
            padding-top: 15px;
            padding-bottom: 15px;
        }
        #navMenu .navLink:hover {
            background: rgba(0,0,0,0.1);
            color: black;
        }
        #topTitle {
            position: absolute;
            top: 30%;
            width: 100%;
            text-align: center;
        }
        .underline {
            position: absolute;
            left: 50%;
            margin-left: -35px;
            margin-top: -30px;
            width: 70px;
            border-bottom: 4px solid rgb(112,192,0);
        }
        .underline1 {
            position: absolute;
            left: 50%;
            margin-left: -25px;
            margin-top: -10px;
            width: 50px;
            border-bottom: 3px solid rgb(112,192,0);
        }
        h1 {
            font-family: "Microsoft Yahei",PingFangSC-Regular;
            font-weight: normal;
            font-size: 75px;
            color: white;
        }
        h2 {
            font-weight: normal;
            font-size: 15px;
            color: white;
        }
        h3 {
            font-weight: normal;
            font-size: 30px;
            color: rgb(60,60,60);
        }
        #scrollDown {
            position: absolute;
            top: 100%;
            margin-top: -100px;
            width: 100%;
        }
        #scrollDownIcon {
            position: absolute;
            left: 50%;
            margin-left: -10px;
            margin-top: 50px;
            border-right: 3px solid rgba(255,255,255,0.5);
            border-top: 3px solid rgba(255,255,255,0.5);
            height: 20px;
            width: 20px;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
            cursor: pointer;
            transition: .25s;
        }
        #scrollDownIcon:hover {
            border-right: 3px solid white;
            border-top: 3px solid white;
        }
        #scrollDownIcon:active {
            border-right: 3px solid rgba(255,255,255,0.35);
            border-top: 3px solid rgba(255,255,255,0.35);
        }
        #top {
            position: relative;
            top: 0;
        }
        #about,#work,#log,footer {
            position: relative;
            top: 100%;
            width: 100%;
            text-align: center;
            padding-top: 80px;
            padding-bottom: 100px;
        }
        #about,#log {
            background: white;
        }
        .tagBox {
            position: relative;
            margin-top: 60px;
            width: 100%;
            font-size: small;
        }
        .tag {
            background: rgba(0,0,0,0.06);
            padding: 10px;
            margin-left: 5px;
            margin-right: 5px;
            color: rgb(100,100,100);
            transition: .25s;
        }
        .tag:hover {
            background: rgba(0,0,0,0.1);
            color: rgb(10,10,10);
            -webkit-box-shadow: rgba(0,0,0,0.1) 0px 5px 10px;
            -moz-box-shadow: rgba(0,0,0,0.1) 0px 5px 10px;
            box-shadow: rgba(0,0,0,0.1) 0px 5px 10px;
        }
        .aboutContent {
            position: relative;
            margin-top: 35px;
            width: 100%;
            font-size: 14px;
            background: white;
            color: rgb(90,90,90);
        }
        #work {
            background: rgb(245,245,245);
        }
        .workList {
            position: relative;
            margin-top: 50px;
            left: 10%;
            width: 80%;
        }
        .workLink {
            position: relative;
            display: inline-block;
            width: 300px;
            height: 250px;
            margin-left: 15px;
            margin-right: 15px;
            margin-bottom: 30px;
            background: white;
            -webkit-box-shadow: rgba(0,0,0,0.03) 0px 5px 10px;
            -moz-box-shadow: rgba(0,0,0,0.03) 0px 5px 10px;
            box-shadow: rgba(0,0,0,0.03) 0px 5px 10px;
            text-align: left;
            transition: .25s;
            cursor: pointer;
        }
        .workLink:hover {
            -webkit-box-shadow: rgba(0,0,0,0.2) 0px 10px 30px;
            -moz-box-shadow: rgba(0,0,0,0.2) 0px 10px 30px;
            box-shadow: rgba(0,0,0,0.2) 0px 10px 30px;
        }
        .workLinkPic {
            position: absolute;
            width: 100%;
            height: 155px;
            background-color: rgb(230,230,230);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .workLinkText1 {
            font-size: 15px;
            line-height: 0px;
            font-family: "Microsoft Yahei",PingFangSC-Regular;
            font-weight: bold;
        }
        .workLinkText2 {
            font-size: small;
            line-height: 10px;
            white-space: nowrap;
        }
        .workLinkText3 {
            font-size: 11px;
            line-height: 15px;
            color: rgba(0,0,0,0.5);
        }
        .logBoxOuter {
            position: relative;
            margin-top: 30px;
            width: 70%;
            left: 15%;
            overflow: hidden;
        }
        #logBox {
            position: relative;
            width: 100%;
            white-space: nowrap;
            overflow-y: hidden;
            overflow-x: auto;
            overflow: -moz-scrollbars-none;
            -webkit-overflow-scrolling: touch;
        }
        #logBox::-webkit-scrollbar { display:none }
        .tip {
            padding-top: 10px;
            font-size: 12px;
            color: rgba(0,0,0,0.6);
        }
        .logContent {
            display: inline-block;
            padding-left: 80px;
            padding-right: 80px;
            text-align: left;
            vertical-align: top;
        }
        .logText1,.logText3 {
            font-size: 18px;
            line-height: 3px;
            font-family: "Microsoft Yahei",PingFangSC-Regular;
            font-weight: bold;
        }
        .logText2 {
            font-size: small;
            line-height: 5px;
        }
        .logText3 {
            color: rgba(0,0,0,0.2);
        }
        .logMaskL,.logMaskR {
            position: absolute;
            top: 0;
            width: 10%;
            height: 100%;
        }
        .logMaskL {
            left: 0;
            /*background: -webkit-linear-gradient(left,white,transparent);
            background: -o-linear-gradient(left,white,transparent);
            background: -moz-linear-gradient(left,white,transparent);
            background: linear-gradient(left,white,transparent);*/
            background-image: linear-gradient(to left, rgba(255,255,255,0), white);
        }
        .logMaskR {
            left: 90%;
            /*background: -webkit-linear-gradient(right,white,transparent);
            background: -o-linear-gradient(right,white,transparent);
            background: -moz-linear-gradient(right,white,transparent);
            background: linear-gradient(right,white,transparent);*/
            background-image: linear-gradient(to right, rgba(255,255,255,0), white);
        }
        .footerCol {
            position: relative;
            display: inline-block;
            text-align: left;
            vertical-align: top;
            padding-left: 50px;
            padding-right: 50px;
        }
        .footerTitle {
            font-family: "Microsoft Yahei",PingFangSC-Regular;
            font-size: 15px;
            font-weight: bold;
            line-height: 10px;
            color: white;
        }
        .footerLink {
            position: relative;
            text-decoration: none;
            color: white;
            font-size: 12px;
            transition: .25s;
        }
        a.footerLink:hover {color: rgb(112,192,0);}
        a.footerLink:active {color: rgba(112,192,0,0.6);}
        .footerText1 {
            color: white;
            font-size: 12px;
            line-height: 10px;
        }
        .beianText {
            position: relative;
            top: -6px;
        }
        .footerText2 {
            color: rgba(255,255,255,0.5);
            font-size: 12px;
            text-decoration: none;
        }

        @media screen and (max-width:1200px){
            .topLogo {margin-left: 100px;}
            .navBox {margin-left: -525px;width: 500px;}
            .workList {left: 5%;width: 90%;}
        }
        @media screen and (max-width:900px){
            .topLogo {margin-left: 25px;}
            .navBox {display: none;}
            .menuIcon {display: block;}
            .workList {left: 0;width: 100%;}
        }
        @media screen and (max-width:600px){
            h1 {font-size: 65px;}
            h2 {font-size: small;line-height: 12px;}
            .tagBox {font-size: 12px;}
            .aboutContent {font-size: small;left: 5%;width: 90%;}
            .logContent {padding-left: 30px;padding-right: 30px;}
            .footerCol {padding-bottom: 30px;}
            footer {padding-bottom: 60px;}
            #copyright {text-align: center;}
        }
        @media screen and (max-width:400px){
            .footerCol {padding-left: 20px;padding-right: 20px;}
        }
    </style>
</head>

<body>
<div id="top"></div>
<div id="topBg" style="opacity: 1;"></div>
<div class="navBar" id="21w15a">
    <div class="topLogo"></div>
    <div class="navBox">
        <a href="#about" class="navLink">关于</a>
    </div>
    <span class="menuIcon"></span>
</div>
<div id="mask"></div>
<div id="navMenu">
    <span class="menuIcon"></span>
    <a href="#about" class="navLink">关于</a>
</div>
<div id="topTitle"><h1>静水流深.</h1><p class="underline"></p><h2><span style="color:rgba(255,255,255,0.6)">/*</span> 这里是n&x的个人主页 <span style="color:rgba(255,255,255,0.6)">*/</span></h2></div>
<div id="scrollDown"><span id="scrollDownIcon"></span></div>
<div id="about">
    <h3>关于我们</h3><p class="underline1"></p>
    <div class="tagBox"><span class="tag">N:90后</span><span class="tag">X:00后</span></div>
    <div class="aboutContent"><p>我们是 N </p><p>计算机    程序员</p><p></p><p>强迫症、拖延症、懒癌晚期</p><p>在武汉一起读大学</p><p>热衷钻研与计算机有关的一切</p><p>雪糕 甜品 火锅 </p><p>带着相机和好心情 一起环游世界</p><p>往后余生   请多指教！</p></div>
    </div>
    <footer>
    </footer>



</body>
<script type="text/javascript">
    var config = {
        model: {
            jsonPath: 'hijiki.model.json',
        },
        display: {
            superSample: 1,
            width: 245,
            height: 245,
            position: 'right',
            hOffset: 0,
            vOffset: 0,
        },
        mobile: {
            show: false,
            scale: 1,
            motion: false,
        },
        react: {
            opacityDefault: 1,
            opacityOnHover: 0.75
        }
    };
    L2Dwidget.init(config);
</script>

</html>